<template>
  <div>
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">产品中心-强化复合地板-质量等级</div>

    <div class="content">
      <div class="title-box">
        <div class="title-text">
          <p>三种质量等级 = 高，较高，最高</p>
          <p class="video-intro" @click="show = true">
            视频介绍
            <img src="../../assets/img/play.png" alt />
          </p>
        </div>

        <div class="wrap-text">
          <p>
            现在，您能比以往更加方便地寻找适合您家的地板。
            您只要挑选您喜欢的设计，然后选择能够提供适合您家中的
            不同房间需要的耐用性的质量等级即可。
          </p>
          <p>每块地板都是不同的。</p>
          <p>
            举例来说，厨房地板需要比空闲卧室的地板更耐磨。
            在 Pergo，我们相信您应该以您需要的质量水平获得您喜欢的设计外观。
            这也是为什么我们的全部 87 款复合地板设计的每一款都有三种不同的质量等级选择，
            在磨损防护、抗冲击性和防划痕性能方面给您不同的选择。
          </p>
        </div>
      </div>

      <div class="product-box">
        <div class="product-item">
          <div class="item-img">
            <img src="http://www.pergo.com.cn/sites/default/files/article/level_green.jpg" alt />
          </div>
          <div class="item-right">
            <h3 style="color:#91c26e">乐活版</h3>
            <p>
              优良的耐用性，适合所有家居环境。
              <br />≥32 级
              <br />≥TitanX™
              <br />≥25 年质保
            </p>
          </div>
        </div>

        <div class="product-item">
          <div class="item-img">
            <img src="http://www.pergo.com.cn/sites/default/files/article/level_yellow.jpg" alt />
          </div>
          <div class="item-right">
            <h3 style="color:#ed7e10">典藏版</h3>
            <p>
              出色的耐用性，适合高需求的日常生活。
              <br />≥33 级
              <br />≥TitanX™
              <br />≥终身质保
            </p>
          </div>
        </div>

        <div class="product-item">
          <div class="item-img">
            <img src="http://www.pergo.com.cn/sites/default/files/article/level_black.jpg" alt />
          </div>
          <div class="item-right">
            <h3>殿堂版</h3>
            <p>
              极高的耐用性，适合高磨损和公共区域。
              <br />≥34 级
              <br />≥TitanX™
              <br />≥终身质保
            </p>
          </div>
        </div>
      </div>

      <div class="line-box">
        <div class="line-title">
          <h3>无敌耐用！</h3>
          <h4>TitanX™ 表面防护多层技术提供卓越的抗划痕、耐磨和抗冲击性。</h4>
          <div class="scoll-box">
            <div class="scoll-item">
              <div class="line-img">
                <img src="http://www.pergo.com.cn/sites/default/files/article/anti_scretch.jpg" alt />
              </div>
              <div class="line-text">
                <h3 style="color:#000;">抗划痕</h3>
                <p
                  style="margin-top:0.1rem;white-space:normal;"
                >TitanX™ 表面技术的防划痕和磨损功能在市场上首屈一指，可确保地板持久光泽亮丽。</p>
              </div>
            </div>

            <div class="scoll-item">
              <div class="line-img">
                <img
                  src="http://www.pergo.com.cn/sites/default/files/article/endurance_level.jpg"
                  alt
                />
              </div>
              <div class="line-text">
                <h3 style="color:#000;">耐磨性</h3>
                <p style="margin-top:0.1rem;white-space:normal;">Pergo 强化地板可长期承受日常生活中的磨损。</p>
              </div>
            </div>

            <div class="scoll-item">
              <div class="line-img">
                <img src="http://www.pergo.com.cn/sites/default/files/article/anti_shock.jpg" alt />
              </div>
              <div class="line-text">
                <h3 style="color:#000;">抗冲击性</h3>
                <p style="margin-top:0.1rem;white-space:normal;">独特的多层结构和致密核心材料防止坠落物体和高跟鞋对地板的损害。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出视频 -->
    <van-dialog v-model="show" :show-cancel-button="false" confirmButtonText="关闭">
      <iframe
        height="190"
        width="100%"
        frameborder="0"
        allowfullscreen
        src="http://player.youku.com/embed/XMTYzMzk2MDQ1Ng=="
      ></iframe>
    </van-dialog>
    <c-footer></c-footer>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      type: this.$route.query.type ? this.$route.query.type : 0,
      show: false
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    getType(type) {
      this.type = type;
    }
  },

  watch: {}
};
</script>
<style lang='less' scoped>
.content {
  margin-top: 0.1rem;

  .title-box {
    padding: 0.4rem 0.25rem 0.3rem;
    background: #f8f8f8;
    .title-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      & > p:first-child {
        font-size: 0.32rem;
      }
    }
    .wrap-text {
      margin-top: 0.25rem;
      color: #6e6e6e;
    }
    .video-intro {
      display: flex;
      align-items: center;
      img {
        width: 0.27rem;
        height: 0.27rem;
        vertical-align: middle;
        margin-left: 0.1rem;
      }
    }
  }
}
.product-box {
  padding: 0 0.25rem;
  margin-bottom: 0.8rem;
}
.product-item {
  display: flex;
  margin-top: 0.4rem;
  .item-img {
    width: 3.75rem;
    height: 3.75rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .item-right {
    flex: 1;
    padding: 0.2rem 0.35rem;
    & > p {
      color: #6e6e6e;
    }
  }
}
.line-box {
  padding: 0 0.25rem;
  .line-title {
    color: #444;
    & > h3 {
      text-align: center;
    }
    & > h4 {
      margin-top: 0.2rem;
    }
  }
  .scoll-box {
    margin-top: 0.4rem;
    width: 100%;
    white-space: nowrap;
    display: flex;
    overflow-x: scroll;
    .scoll-item {
      display: inline-block;
      margin-right: 0.9rem;
      height: 7rem;
      width: 3.3rem;
      flex-shrink: 0;
      .line-img {
        height: 3.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .line-text {
        padding-left: 0.4rem;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>